<template>
    <div class="cat">
        <div class="top">
            <icon class="el-icon-s-order" type="error" size="100"><span>我的订单</span> </icon>
        </div>
        <div v-for="(item, index) in tableData" :key="index" class="table1">
            <div class="table-top">
                <div class="left" style="color: #ff6700;">订单编号:{{ item[0].order_id }}</div>
                <div class="right" style="margin-right: 30px;">订单时间:{{ new Date(item[0].order_time).format() }}</div>
            </div>
            <el-table :data="item" style="width: 100%" class="table">
                <el-table-column width="180">
                    <template slot-scope="{row}">
                        <img :src="'http://101.132.181.9/api/' + row.product_picture" alt="" class="img">
                    </template>
                </el-table-column>
                <el-table-column prop="product_name" label="商品名称" width="180">
                </el-table-column>
                <el-table-column prop="product_price" label="单价">
                </el-table-column>
                <el-table-column prop="product_num" label="数量">
                </el-table-column>
                <el-table-column label="小计">
                    <template slot-scope="{row}">
                        <span class="xiaoji">{{ row.product_price }}元</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div class="left">
                    <span>共<span class="num">{{ num1 }}</span> 件商品</span>
                </div>
                <div class="right">
                    <span>合计：</span>
                    <span class="aa">4198元</span>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import { gteorder } from '../api/api'
export default {
    data() {
        return {
            tableData: []
        }
    },
    methods: {
        async gteorder() {
            let id = this.$store.state.id
            const { orders } = await gteorder({ user_id: id })
            this.tableData = orders
            console.log(this.tableData);
            console.log(111);
        },
        aa(value) {
            console.log(value);
        }
    },
    computed: {
        num1() {
            return this.tableData.length
        },
        num2() {
            return
        }
    },
    components: {},
    created() {
        this.gteorder()
    },
}
</script>
<style lang="scss" scoped>
.cat {
    height: 100%;

    .table1 {
        .table-top {
            display: flex;
            justify-content: space-between;
            line-height: 60px;
            border-bottom: #ff6700 1px solid;
        }
    }

    .top {
        line-height: 100px;
        border-bottom: 2px solid #ff6700;

        icon {
            font-size: 32px;

            span {
                padding-left: 10px;
                color: #000;
            }

            margin-right: 20px;
        }

        span {
            margin-top: 10px;
            color: #757575;
        }
    }

    .table {
        .img {
            width: 100px;
            height: 110px;
        }

        .xiaoji {
            color: #ff6700;
        }
    }

    .bottom {
        width: 100%;
        display: flex;
        justify-content: space-between;
        line-height: 50px;
        border-top: 1px solid #ff6700;

        .left {
            margin-left: 50px;

            .num {
                color: #ff6700;
            }
        }

        .right {
            margin-right: 50px;
            color: #ff6700;

            .aa {
                font-size: 25px;
            }
        }
    }
}
</style>
